<template>
  <div class="search">
    <Header title="搜索商品"></Header>

    <div class="searchInput">
      <nut-searchbar
        background="#efefef"
        placeholder="请输入商品或店铺名称"
        v-model="filterParams.skuTitle"
      >
        <template #rightout>
          <Search @click="remoteProductData" />
        </template>
      </nut-searchbar>
    </div>

    <div class="navbarBox">
      <div class="navbar">
        <div class="item recommend">
          <span @click="recommend.visible = true">综合推荐</span>
          <nut-popover
            v-model:visible="recommend.visible"
            :list="recommend.list"
            location="bottom-start"
          ></nut-popover>
          <span class="arrow">
            <i class="down"></i>
          </span>
        </div>
        <div class="item" @click="sortProduct('saleNum')">
          <span>销量</span>
          <span class="arrow">
            <i :class="sortParams.saleNum == 'asc' ? 'up active' : 'up'"></i>
            <i
              :class="sortParams.saleNum == 'desc' ? 'up active' : 'up'"
              class="down"
            ></i>
          </span>
        </div>
        <div class="item" @click="sortProduct('price')">
          <span>价格</span>
          <span class="arrow">
            <i :class="sortParams.price == 'asc' ? 'up active' : 'up'"></i>
            <i
              :class="sortParams.price == 'desc' ? 'up active' : 'up'"
              class="down"
            ></i>
          </span>
        </div>
        <div class="item">
          <span @click="filter.visible = true">筛选</span>
          <nut-popup
            class="filterPopup"
            position="right"
            v-model:visible="filter.visible"
            style="width: 80%; height: 100%"
          >
            <div class="filter">
              <div class="filterBox">
                <div class="price">
                  <div class="dividerBox">
                    <div class="left">
                      <span class="divider"></span>
                      <span class="title">价格区间</span>
                    </div>
                  </div>
                  <div class="input">
                    <nut-input
                      v-model="filterParams.startPrice"
                      placeholder="最低价"
                    />
                    <span>-</span>
                    <nut-input
                      v-model="filterParams.endPrice"
                      placeholder="最高价"
                    />
                  </div>
                </div>
                <div
                  class="attr"
                  v-for="(attr, attrIndex) in attrData"
                  :key="attrIndex"
                >
                  <div class="dividerBox">
                    <div class="left">
                      <span class="divider"></span>
                      <span class="title">{{ attr.name }}</span>
                    </div>
                  </div>
                  <div class="valueBox">
                    <div
                      v-for="(val, valIndex) in attr.values"
                      :key="valIndex"
                      :class="val.selected ? 'active value' : 'value'"
                      @click="selectedAttr(val)"
                    >
                      <span>{{ val.value }}{{ attr.unit }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="btnList">
                <nut-button type="default" class="reset" @click="resetParams"
                  >重置</nut-button
                >
                <nut-button type="primary" class="ensure" @click="searchProduct"
                  >确定
                  <span class="count">({{ countData.count }})</span></nut-button
                >
              </div>
            </div>
          </nut-popup>
        </div>
      </div>
    </div>

    <div class="product">
      <nut-card
        @click="
          $router.push({
            path: '/product',
            query: { spuId: item.spuId, skuId: item.id },
          })
        "
        v-for="(item, index) in productData.records"
        :key="index"
        :img-url="item.image"
        :title="item.title"
      >
        <template #shop-tag>
          <nut-price :price="item.price" size="normal" symbol="￥" />
        </template>
        <template #price>
          <span>规格参数</span>
        </template>
        <template #origin>
          <span></span>
        </template>
      </nut-card>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const { proxy } = getCurrentInstance();
import { Search } from "@nutui/icons-vue";

// 排序参数
const initSortParams = reactive({
  price: "",
  saleNum: "",
});
const sortParams = reactive({
  price: "",
  saleNum: "",
});

// 过滤参数
const initParams = reactive({
  page: 1,
  pageSize: 10,
  categoryId: route.query.categoryId,
  skuTitle: "",
  attrs: [],
  sorts: [],
});
const filterParams = reactive({
  page: 1,
  pageSize: 10,
  categoryId: route.query.categoryId,
  skuTitle: "",
  attrs: [],
  sorts: [],
});

// 总数数据
const countData = reactive({
  count: 0,
});

// 商品数据
const productData = reactive({
  records: [],
});

// 规格参数
const attrData = reactive([]);

const recommend = reactive({
  visible: false,
  list: [
    {
      name: "综合推荐",
    },
    {
      name: "评分从高到低",
    },
  ],
});

const filter = reactive({
  visible: false,
});

// 重置
const resetParams = () => {
  Object.assign(filterParams, JSON.parse(JSON.stringify(initParams)));
  Object.assign(sortParams, JSON.parse(JSON.stringify(initSortParams)));
  remoteAttrData();
  remoteProductData();
  remoteCountData();
};

// 拼装规格参数
const buildAttrParams = () => {
  var attrs = [];
  attrData.forEach((attr) => {
    var selected = [];
    attr.values.forEach((val) => {
      if (val.selected) {
        selected.push(val.value);
      }
    });

    if (selected.length > 0) {
      attrs.push({
        attrId: attr.id,
        attrValue: selected,
      });
    }
  });
  filterParams.attrs = attrs;
};

// 拼装排序数据
const buildSortParams = () => {
  filterParams.sorts = [];

  var sorts = [];
  Object.keys(sortParams).forEach((key) => {
    if (sortParams[key] != "") {
      sorts.push({
        field: key,
        sort: sortParams[key],
      });
    }
  });

  filterParams.sorts = sorts;
};

// 排序数据
const sortProduct = (type) => {
  var sort = sortParams[type];

  Object.assign(sortParams, JSON.parse(JSON.stringify(initSortParams)));

  if (sort == "") {
    sortParams[type] = "asc";
  } else if (sort == "desc") {
    sortParams[type] = "asc";
  } else if (sort == "asc") {
    sortParams[type] = "desc";
  }
  buildSortParams();
  remoteProductData();
};

// 选中规格才能告诉
const selectedAttr = (val) => {
  val.selected = !val.selected;
  buildAttrParams();
  remoteCountData();
};

// 检索数据
const searchProduct = () => {
  // 拼装规格参数
  buildAttrParams();
  remoteProductData();
  filter.visible = false;
};

// 获取总数
const remoteCountData = () => {
  proxy.$searchApi.product
    .count(filterParams)
    .then((res) => {
      countData.count = res.data;
    })
    .catch((error) => {});
};

// 获取商品列表
const remoteProductData = () => {
  proxy.$searchApi.product
    .listPage(filterParams)
    .then((res) => {
      Object.assign(productData, res.data);
    })
    .catch((error) => {});
};

// 获取规格参数
const remoteAttrData = () => {
  proxy.$searchApi.product
    .baseAttrList(filterParams)
    .then((res) => {
      Object.assign(attrData, res.data);
    })
    .catch((error) => {});
};

// 页面加载完毕
onMounted(() => {
  remoteAttrData();
  remoteProductData();
  remoteCountData();
});
</script>

<style lang="less" scoped>
.search {
  border-radius: 5px;
  .searchInput {
    margin: 0px 5px 1px 5px;
    .nut-searchbar {
      background: #fff !important;
      :deep(.nut-icon) {
        margin-right: 10px;
      }
      :deep(input) {
        font-size: 13px;
      }
    }
  }
  .navbarBox {
    margin: 0px 5px;
    .navbar {
      background: #fff;
      border-radius: 5px;
      padding: 15px 20px 15px 20px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      .item.active {
        border-bottom: 3px solid #fa2c19;
        color: #fa2c19;
        padding-bottom: 2px;
      }
      .item.recommend {
        :deep(.nut-popup) {
          margin-top: 28px;
          left: 15px;
        }
        :deep(.nut-popover-content) {
          font-size: 13px;
          margin-left: 2px;
        }
        .arrow .down::before {
          content: "";
          width: 6px;
          height: 6px;
          border: solid #000;
          border-width: 0 0 1px 1px;
          transform: translate(-50%, -50%) rotate(-45deg);
          position: absolute;
          left: 50%;
          top: 45%;
        }
      }
      .item {
        font-size: 13px;
        .arrow {
          margin-left: 10px;
          .up {
            position: relative;
          }
          .up::before {
            content: "";
            width: 6px;
            height: 6px;
            border: solid #000;
            border-width: 1px 1px 0 0;
            transform: translate(-50%, -50%) rotate(-45deg);
            position: absolute;
            left: 50%;
            top: 40%;
          }
          .up.active::before,
          .down.active::before {
            border-color: #fa2c19;
          }
          .down {
            position: relative;
          }
          .down::before {
            content: "";
            width: 6px;
            height: 6px;
            border: solid #000;
            border-width: 0 0 1px 1px;
            transform: translate(-50%, -50%) rotate(-45deg);
            position: absolute;
            left: 50%;
            top: 63%;
          }
        }
      }
    }
  }
  .product {
    padding: 0px 5px 10px 5px;
    .nut-card {
      width: auto;
      background: #fff;
      margin-top: 1px;
      padding: 15px 5px 5px 10px;
      border-radius: 5px;
      :deep(.nut-card__left) {
        width: auto;
        height: auto;
        img {
          border-radius: 5px;
          height: 90px;
          width: 90px;
        }
      }
      :deep(.nut-card__right) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .nut-card__right__shop {
          display: none;
        }
      }
    }
    :deep(.nut-card__right__title) {
      font-size: 13px;
    }
  }
  .filterPopup {
    position: relative;
  }
  .filter {
    background: #efefef;
    .filterBox {
      padding: 5px;
      margin-bottom: 60px;
      .price {
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        background: #fff;
        padding: 10px;
        .dividerBox {
          margin-left: 5px;
        }
        .input {
          display: flex;
          align-items: center;
          span {
            margin: 0px 5px 0px 5px;
          }
          .nut-input {
            padding: 5px;
            border: 1px solid #efefef;
            border-radius: 5px;
            :deep(.input-text) {
              font-size: 12px;
              padding-left: 5px;
            }
          }
        }
      }
      .attr {
        margin-top: 2px;
        padding: 10px 10px 5px 10px;
        border-radius: 5px;
        background: #fff;
        .valueBox {
          display: flex;
          flex-wrap: wrap;
          .value {
            display: block;
            margin-right: 12px;
            margin-bottom: 12px;
            height: 30px;
            line-height: 30px;
            font-size: 11px;
            padding: 0px 18px;
            border-color: rgb(242, 242, 242);
            border-radius: 15px;
            background: rgb(242, 242, 242);
          }
          .value.active {
            background: transparent;
            border: 1px solid #fa2c19;
            color: #fa2c19;
          }
        }
      }
    }
    .btnList {
      position: fixed;
      right: 0;
      bottom: 0px;
      width: 80%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      height: 60px;
      .reset {
        margin-left: 10px;
        width: 120px;
        font-size: 13px;
      }
      .ensure {
        margin-right: 10px;
        width: 120px;
        font-size: 13px;
        .count {
          font-size: 10px;
        }
      }
    }
  }
}
</style>